<template>
  <v-container
    class="green lighten-2"
    style="position:fixed;top:0px;bottom:0px;left:0px;rigth:0px;overflow:scroll;"
  >
    <!-- 第零行，标题、返回按钮、问号图标 -->
    <v-row class="mt-n3">
      <v-col>
        <v-btn :to="{name:'home'}" class="mx-2" elevation="0" fab outlined x-small color="white">
          <v-icon color="white">mdi-keyboard-backspace</v-icon>
        </v-btn>
      </v-col>
      <v-col>
        <h3 class="d-flex justify-center">碳 减 排 量</h3>
      </v-col>
      <v-col></v-col>
    </v-row>
    <!-- 第零行，问号图标 -->
    <!-- <v-row justify="end">
      <v-icon class="mr-4">mdi-help-circle</v-icon>
    </v-row>-->
    <!-- 第一行，头像、总减排量 -->

    <v-row>
      <div class="marquee">
        <div class="content">
          <span>绿色出行，绿色生活</span>
          <span style="display: inline-block;width:5em"></span>
        </div>
      </div>
    </v-row>

    <v-row>
      <!-- 头像 -->
      <v-col cols="3">
        <v-avatar size="64">
          <img src="https://cdn.vuetifyjs.com/images/lists/2.jpg" alt="John" />
        </v-avatar>
      </v-col>
      <!-- 分数 -->
      <v-col cols="8">
        <v-row>
          <!-- 昵称 -->
          <v-col cols="8">
            <div class="white--text font-weight-bold headline mt-n2 ml-n3">张小明</div>
          </v-col>
          <v-col cols="4">
            <!-- <v-row>
              <v-btn small color="primary" class="mt-n2 ml-n2 white--text">
                查看证书
                <v-icon right dark>mdi-license</v-icon>
              </v-btn>
            </v-row>-->
            <v-row>
              <v-dialog
                v-model="dialog"
                fullscreen
                hide-overlay
                transition="dialog-bottom-transition"
              >
                <template v-slot:activator="{ on }">
                  <v-btn small color="primary" class="mt-n2 ml-n2 white--text" v-on="on">
                    查看荣誉
                    <v-icon right dark>mdi-license</v-icon>
                  </v-btn>
                </template>
                <v-card>
                  <v-toolbar dark color="green">
                    <v-toolbar-title>荣誉</v-toolbar-title>
                    <v-spacer></v-spacer>
                    <v-btn icon dark @click="dialog = false">
                      <v-icon>mdi-close</v-icon>
                    </v-btn>
                  </v-toolbar>
                  <v-card style="width:320px;" class="mt-5 ml-5">
                    <v-img src="../assets/证书1.jpg"></v-img>
                  </v-card>
                  <v-card flat>
                    <v-row>
                      <v-col cols="6">
                        <v-card flat>
                          <v-img src="../assets/奖章1.jpg"></v-img>
                        </v-card>
                      </v-col>
                      <v-col cols="6">
                        <v-card flat>
                          <v-img src="../assets/奖章2.jpg"></v-img>
                        </v-card>
                      </v-col>
                      <v-col cols="6">
                        <v-card flat disabled>
                          <v-img src="../assets/奖章3.jpg"></v-img>
                        </v-card>
                      </v-col>
                      <v-col cols="6">
                        <v-card flat disabled>
                          <v-img src="../assets/奖章4.jpg"></v-img>
                        </v-card>
                      </v-col>
                    </v-row>
                  </v-card>
                </v-card>
              </v-dialog>
            </v-row>
          </v-col>
        </v-row>
        <!-- 分数值 -->
        <v-row>
          <div class="white--text font-weight-medium mt-n1">累计碳减排量：28000g</div>
        </v-row>
      </v-col>
    </v-row>
    <!-- 第二行，统计图 -->
    <br />
    <v-row>
      <v-col>
        <v-card color="yellow">
          <v-sheet color="rgba(0, 0, 0, .12)">
            <v-sparkline
              :value="value"
              color="rgba(255, 255, 255, .7)"
              height="100"
              padding="24"
              stroke-linecap="round"
              smooth
            >
              <template v-slot:label="item">{{ item.value }}g</template>
            </v-sparkline>
          </v-sheet>
          <v-card-text>
            <div class="display-1 font-weight-thin">今日减排 760g</div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <!-- 第三行，减排详情 -->
    <div class="white--text font-weight-black">个人减排量详情</div>
    <v-row>
      <v-col>
        <v-card>
          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <span style="position:relative;right:15px;">
                <v-icon>mdi-walk</v-icon>
                <span style="position:relative;top:1px;left:10px;" class="body-2">步行</span>
              </span>
            </v-col>
            <v-col cols="2" class="d-flex justify-end align-center">
              <span style="position:relative;left:15px;">238g</span>
            </v-col>
            <v-col cols="1"></v-col>
          </v-row>
          <v-divider></v-divider>

          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <span style="position:relative;right:15px;">
                <v-icon>mdi-bike</v-icon>
                <span style="position:relative;top:1px;left:10px;" class="body-2">骑行</span>
              </span>
            </v-col>
            <v-col cols="2" class="d-flex justify-end align-center">
              <span style="position:relative;left:15px;">0g</span>
            </v-col>
            <v-col cols="1"></v-col>
          </v-row>
          <v-divider></v-divider>

          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <span style="position:relative;right:15px;">
                <v-icon>mdi-bus</v-icon>
                <span style="position:relative;top:1px;left:10px;" class="body-2">公交车</span>
              </span>
            </v-col>
            <v-col cols="2" class="d-flex justify-end align-center">
              <span style="position:relative;left:15px;">160g</span>
            </v-col>
            <v-col cols="1"></v-col>
          </v-row>
          <v-divider></v-divider>

          <v-row>
            <v-col cols="1"></v-col>
            <v-col cols="8">
              <span style="position:relative;right:15px;">
                <v-icon>mdi-subway-variant</v-icon>
                <span style="position:relative;top:1px;left:10px;" class="body-2">地铁</span>
              </span>
            </v-col>
            <v-col cols="2" class="d-flex justify-end align-center">
              <span style="position:relative;left:15px;">362g</span>
            </v-col>
            <v-col cols="1"></v-col>
          </v-row>
          <v-divider></v-divider>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
export default {
  data: () => ({
    dialog: false,
    value: [423, 446, 675, 510, 590, 610, 760]
  })
};
</script>

<style scoped>
@keyframes kf-marque-animation {
  0% {
    transform: translateX(140%);
  }
  100% {
    transform: translateX(-80%);
  }
}

.marquee {
  /*  */
  width: 500px; /* 走马灯的宽 */
  /* border-radius: 10px; */
  height: 35px; /* 走马灯的高 */
  line-height: 35px; /* 文字的高 */
  /*  background: lightblue;    走马灯的背景 */
  overflow: hidden; /* 处理溢出的内容：https://www.w3school.com.cn/css/pr_pos_overflow.asp */
  white-space: nowrap; /* 设置如何处理元素内的空白 */
  /* text-overflow: clip; */
  /* position: relative; */
  font-size: 20px; /* 文字的大小 */
}

.marquee .content {
  display: inline-block; /* ？ */
  /* position: relative; */
  padding-right: 0px; /* 设置元素右内边距（间接调速度） */
  animation: kf-marque-animation 7s linear infinite; /* 设置动画属性 */
  white-space: nowrap;
}
</style>